<template>
  <view class="container">
    <view class="common_cell">
      <u-cell-group :border="false">
        <u-cell :border="false" title="低温报警值">
          <view slot="value">
            <u-input
              inputAlign="right"
              placeholder="请输入低温报警值"
              border="none"
              v-model="lowTemp"
            >
              <view slot="suffix"> ℃ </view>
            </u-input>
          </view>
        </u-cell>
        <u-cell :border="false" title="高温报警值">
          <view slot="value">
            <u-input
              inputAlign="right"
              placeholder="请输入高温报警值"
              border="none"
              v-model="highTemp"
            >
              <view slot="suffix"> ℃ </view>
            </u-input>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="warning_phone">接收报警手机号</view>

    <view class="common_cell" v-for="(item, index) in phones" :key="index">
      <u-cell :title="'手机号' + (index + 1)">
        <u--input
          inputAlign="right"
          slot="value"
          border="none"
          :value="item"
          placeholder="请输入手机号"
        ></u--input>
      </u-cell>
    </view>

    <view class="common_cell add_phone">
      <u-icon
        name="plus-circle-fill"
        color="rgba(186, 186, 186, 1)"
        size="25"
      ></u-icon>
      <text class="add_phone_desc" @click="addPhone">添加手机号</text>
    </view>

    <view class="common_cell">
      <u-cell :border="false" title="微信报警开关（免费）">
        <u-switch slot="right-icon" v-model="isWxAlarm" />
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell :border="false" title="短信报警开关">
        <u-switch slot="right-icon" v-model="isSmsAlarm" />
      </u-cell>
    </view>

    <!-- 电话报警开关 -->
    <view class="common_cell">
      <u-cell :border="false" title="电话报警开关">
        <u-switch slot="right-icon" v-model="isPhoneAlarm" />
      </u-cell>
    </view>

    <!-- 可用短信数 -->
    <view class="common_cell">
      <u-cell :border="false" title="可用短信数">
        <view slot="value" class="common_cell_value">
          <text class="sms_num">39</text>
          <view class="sms_unit_btn" @click="toRecharge(0)">充值</view>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell :border="false" title="可用电话数">
        <view slot="value" class="common_cell_value">
          <text class="sms_num">39</text>
          <view class="sms_unit_btn" @click="toRecharge(1)">充值</view>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell-group :border="false" class="common_cell">
        <u-cell :border="false" title="报警时段">
          <view slot="value" class="warning_time_type">
            <u-radio-group placement="row" v-model="warnTimeType">
              <u-radio name="day" shape="circle" label="全天"></u-radio>
              <u-radio name="time" shape="circle" label="指定时段"></u-radio>
            </u-radio-group>
          </view>
        </u-cell>

        <u-cell
          v-if="warnTimeType === 'time'"
          title="启动"
          :value="startTime"
          @click="this.$refs.startTimePicker.show = true"
        />
        <u-cell
          v-if="warnTimeType === 'time'"
          :border="false"
          title="停止"
          :value="stopTime"
          @click="this.$refs.stopTimePicker.show = true"
        />
      </u-cell-group>
    </view>

    <!-- 预约到期时间 -->
    <commonDateTimePicker
      ref="startTimePicker"
      @confirm="startTimePickerConfirm"
      mode="time"
    />

    <!-- 结束时间弹窗 -->
    <commonDateTimePicker
      ref="stopTimePicker"
      @confirm="stopTimePickerConfirm"
      mode="time"
    />

    <!-- 保存设置 -->
    <view class="common_save_button2" style="margin-top: 40rpx">保存设置 </view>
  </view>
</template>
  
  <script>
import commonDateTimePicker from "@/components/common-datetime-picker/index.vue";
export default {
  components: {
    commonDateTimePicker,
  },
  data() {
    return {
      // 页面参数
      options: {},
      checked: false,
      phones: [],
      //   是否微信报警开关
      isWxAlarm: false,
      //   短信报警开关
      isSmsAlarm: false,

      //   是否电话报警开关
      isPhoneAlarm: false,

      //   报警时段类型
      warnTimeType: [],

      startTime: "",
      stopTime: "",

      // 低温报警值
      lowTemp: "",

      // 高温报警值
      highTemp: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    addPhone() {
      this.phones.push("");
    },
    toRecharge(type) {
      uni.navigateTo({
        url: `/pages/index/recharge/index?type=${type}`,
      });
    },
    startTimePickerConfirm(_val) {
      this.startTime = _val;
    },
    stopTimePickerConfirm(_val) {
      this.stopTime = _val;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

page {
  height: 100%;
}
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 0 25.568rpx 25.568rpx 25.568rpx;

  ::v-deep .u-cell__body {
    padding-left: 0px;
    padding-right: 0px;
  }

  .warning_phone {
    margin-top: 34.091rpx;
    margin-bottom: 34.091rpx;
    margin-left: 34.091rpx;
    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 290;
    line-height: 40.807rpx;
    text-align: left;
  }

  .add_phone {
    padding-top: 10px;
    padding-bottom: 10px;

    color: rgba(159, 159, 159, 1);
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 700;
    line-height: 33.75rpx;

    display: flex;
    justify-content: center;
    align-items: center;

    .add_phone_desc {
      margin-left: 10.227rpx;
    }
  }
}

.common_cell_value {
  display: flex;
  align-items: center;
  .sms_num {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 700;
    line-height: 33.75rpx;
    text-align: right;
    color: rgba(30, 31, 35, 1);
  }

  .sms_unit_btn {
    width: 81.818rpx;
    height: 44.318rpx;
    border-radius: 8.523rpx;

    font-family: "Microsoft YaHei";
    font-size: 23.864rpx;
    font-weight: 290;
    line-height: 31.739rpx;
    text-align: right;

    color: rgba(255, 255, 255, 1);
    background: rgba(37, 135, 255, 1);

    margin-left: 27.273rpx;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.warning_time_type {
  width: 50%;

  ::v-deep .u-radio-group {
    justify-content: space-between;
  }
}
</style>
  